<template>
    <div id="app-container">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="版权名">
        <el-input v-model="cmiQuery.name" placeholder="版权名"></el-input>
        </el-form-item>
        <el-form-item label="公司名">
          <el-input v-model="cmiQuery.company" placeholder="公司名"></el-input>
        </el-form-item>
        <el-form-item label="备注名">
          <el-input v-model="cmiQuery.remarks" placeholder="备注名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="findPage()">查询</el-button>
        </el-form-item>
        <el-button type="primary" @click="resetData()">清空</el-button>
        <el-button type="primary" @click="dialogFormVisible = true">添加版权</el-button>
      </el-form>
      <el-dialog title="" :visible.sync="dialogFormVisible">
        <el-form :model="cmi">
          <el-form-item label="版权名：" :label-width="formLabelWidth">
            <el-input v-model="cmi.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="公司名：" :label-width="formLabelWidth">
            <el-input v-model="cmi.company" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="备注名：" :label-width="formLabelWidth">
            <el-input v-model="cmi.remarks" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="合作状态" :label-width="formLabelWidth">
            <el-select v-model="cmi.isStatus" placeholder="请选择">
              <el-option label="有效" :value="1"></el-option>
              <el-option label="无效" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="版权简介：" :label-width="formLabelWidth">
            <el-input v-model="cmi.reason" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="createcmi" :disabled="saveBtnDisabled">保 存</el-button>
        </div>
      </el-dialog>
      <el-table :data="cmiList" style="width: 100%">
<!--        <el-table-column prop="id" label="序号" width="180" />-->
        <el-table-column prop="name" label="版权名" width="180" />
        <el-table-column prop="company" label="公司" width="180" />
        <el-table-column prop="remarks" label="备注名"/>
        <el-table-column prop="online" label="上线数量" width="180" />
        <el-table-column prop="offline" label="下线数量"/>
        <el-table-column prop="about" label="即将过期" width="180" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" @click="deleteCmi(scope.row.id)">删除</el-button>
            <el-button type="primary" size="mini" @click="update(scope.row.id)">修改</el-button>
            <router-link :to="'/copyrightin/cmi/kehu/'">
              <el-button type="primary" size="mini" >管理客户</el-button>
            </router-link>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="" :visible.sync="dialogFormVisa" >
        <el-form :model="cmi">
          <el-form-item label="版权名：" :label-width="formLabelWidth">
            <el-input v-model="cmi.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="公司名：" :label-width="formLabelWidth">
            <el-input v-model="cmi.company" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="备注名：" :label-width="formLabelWidth">
            <el-input v-model="cmi.remarks" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="合作状态" :label-width="formLabelWidth">
            <el-select v-model="cmi.isStatus" placeholder="请选择">
              <el-option label="有效" :value="1"></el-option>
              <el-option label="无效" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="版权简介：" :label-width="formLabelWidth">
            <el-input v-model="cmi.reason" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisa = false">取 消</el-button>
          <el-button type="primary" @click="updatecmi" :disabled="saveBtnDisabled">保 存</el-button>
        </div>
      </el-dialog>
      <!-- 分页 -->
      <el-pagination
        :page-size="pageSize"
        :current-page="pageNo"
        :total="total"
        :pager-count="11"
        style="padding: 30px 0; text-align: center;"
        layout="total, prev, pager, next, jumper"
        @current-change="findPage">
      </el-pagination>
    </div>
</template>

<script>
  import cmi from "@/api/copyrightin/cmi";
  import book from "@/api/cms/book";
    export default {
      data(){ // 定义变量与初始化变量值
        return {
          cmiList: null, // 数据列表
          cmiQuery: {}, // 查询条件封装对象
          total: 0, // 总记录数
          pageNo:1, // 页码
          pageSize:10, // 每页显示记录数
          currentTime:'', // 当前时间
          dialogTableVisible: false,
          dialogFormVisible:false,
          formLabelWidth: '120px',
          dialogFormVisa:false,
          cmi:{}
        }
      },
      created() {
        this.findPage()
      },
      methods: { // 自定义函数
        update(cmiId){
          this.dialogFormVisa = true
          console.log(cmiId)
          this.view(cmiId)
        },
        findPage(pageNo = 1) { // 查询
          this.pageNo = pageNo
          // 调用 api 中的后端请求方法
          cmi.query(this.pageNo, this.pageSize, this.cmiQuery)
            .then(response => { // 成功之后执行的方法
              this.cmiList = response.data.items
              this.total = response.data.total
            })
        },
        createcmi() { // 添加版权调用的方法
          saveBtnDisabled: true, // 禁用保存按钮
          cmi.createCmi(this.cmi)
            .then(response => {
              // 保存成功之后的提示信息
              this.$message({
                type: 'success',
                message: '添加成功！'
              })
              // 添加成功之后，重新刷新页面
              this.findPage()
              this.dialogFormVisible = false
            })
      },
        resetData(){
          this.cmiQuery = {}
          this.findPage()
        },
        view(cmiId) { // 数据回显
           cmi.view(cmiId)
              .then(response => {
                console.log(response.data.cmi)
                this.cmi = response.data.cmi
              })
        },
        updatecmi() { // ## 修改
          saveBtnDisabled: true
          cmi.update(this.cmi)
            .then(response => {
              // 成功后做消息提示
              this.$message({
                type:'success',
                message:'修改成功！'
              })
              // 修改成功之后，重新刷新页面
              this.findPage()
              this.dialogFormVisa = false
            })
        },
        deleteCmi(cmiId) { // 删除方法
            this.$confirm('此操作将永久删除该版权, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
             cmi.deleteCmi(cmiId)
                .then(response => {
                  // 成功删除后，做消息提示
                  this.$message({
                    type:'success',
                    message:'删除成功！'
                  })
                  // 重新查询
                  this.findPage()
                })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });
            });
          }
        }

    }
</script>

<style scoped>

</style>
